<template>
  <div id="app" ref="viewBox">
    <div class="headerContent" :class="{'showgb':hasBG()}" @click="showFloatBox()">
    
      <router-link to="/headsearch" >
        <div class="searchContent" @click="searchContent()"  >
          
            <div class="titleContent" >
                <span class="title">
                  TS
                </span>
              </div>
            <i class="iconfont icon-search"></i>
            <p class="placeholder">热门搜索:iphone</p>
        
        </div>
      </router-link>
      <div class="loginContent">
        <router-link to="/login" >
        <span class="login" @click="checkOut($event)">{{loginCheck}}</span> 
        </router-link>
      </div>
    </div>
    <div class="slider">
      <div class="swiper-container head-swiper-container">
          <div class="swiper-wrapper mainSwiper">
              <div class="swiper-slide" ><img class="slideimg" src="./images/slider1.jpg"></div>
              <div class="swiper-slide" ><img class="slideimg" src="./images/slider2.jpg"></div>
              <div class="swiper-slide" ><img class="slideimg" src="./images/slider3.jpg"></div>
              <div class="swiper-slide" ><img class="slideimg" src="./images/slider4.jpg"></div>
              
             
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination swiper-pagination-black"></div>
          
      </div>
    </div>

    <div class="news">
      <div class="title">
        <span>TShop</span> 快报:
      </div>
      <div class="newswiper-container swiper-container">
          <div class="swiper-wrapper mainSwiper">
              <div class="swiper-slide" ><span>国货当自强,促销专场</span></div>
              <div class="swiper-slide" ><span>如何做一名最酷的玩家</span></div>
              <div class="swiper-slide" ><span>双十一提前引爆</span></div>
  
              
             
          </div>
          <!-- 如果需要分页器 -->
        
          
      </div>
    </div>
    <div class="quickSale">
      <div class="title">
       <i class="iconfont icon-hot"></i> 秒杀专场
      </div>
      <div class="saleContent">
        <img src="./images/sale1.jpeg" >
        <span class="price">3299</span>
        
      </div>
      <div class="saleContent">
        <img src="./images/sale2.jpeg"  >
        <span class="price">1999</span>
        
      </div>
      <div class="saleContent">
        <img src="./images/sale3.jpg" >
        <span class="price">4199</span>
        
      </div>
    </div> 
    <div class="banner" @click="goSearchI()">
      <img src="./images/5a054c6cNabf534eb.gif" alt="">
    </div><div class="litBanner" >
      <img src="./images/little1.jpg" @click="goCatelogBanner1()">
      <img src="./images/little2.jpg" @click="goCatelogBanner2()">

    </div><div class="colbanner">

      <img src="./images/colbanner1.jpeg"  @click="colBanner('100022')">
      <img src="./images/colbanner2.jpg"  @click="colbanner('100011')">
      <img src="./images/colbanner3.jpg"  @click="colbanner('100014')">
      <img src="./images/colbanner4.jpg"  @click="colbanner('100018')">

    
    
      
    </div>
    <div class="recommendBox">
      <div class="title">
        热门市场
      </div>
      <div class="recommend" @click="recommend('100028')">
        <span>饮品</span>
        <img src="./images/recommend1.jpg"  >
      </div>
      <div class="recommend" @click="recommend('100027')">
        <span>热卖酒品</span>
        <img src="./images/recommend2.jpg" >
       

      </div>
      <div class="recommend" @click="recommend('100018')">
           <span>箱包</span>
         <img src="./images/recommend3.jpg" >
      </div>
      <div class="recommend" @click="recommend('1000')">
           <span>服装</span>
          <img src="./images/recommend4.jpg" >
      </div>
    </div>
    <div class="footer">
      <div class="navcon active" >
            <i class="iconfont icon-all"></i><br/>
            <span>首页</span>
      </div>
      <div class="navcon">
          <i class="iconfont icon-favorite"></i><br/>
            <span>热门</span>
      </div>
      <div class="navcon cart" @click="showFloatBox()">
       <router-link :to="checkCart" >
       <div >
          <i class="iconfont icon-cart" ></i><br/>
            <span >购物车</span>
          <div class="cartfloat" v-show="cartCount">
            <span>{{cartCount}}</span>
          </div>
      </div>
           </router-link >
      </div>
      <div class="navcon"  @click="goUser()">
          <i class="iconfont icon-account"></i><br/>
            <span>用户</span>
      </div>

      </div>
      <div class="floatContent" v-show="showFloat" >
     <router-view v-on:closeevent="showFloatBox()" v-on:loginSuccess="loginCallBack()">
       </router-view> 
       <span class="title">热门搜索</span>
      <div class="recommendbox" >
        <span class="recommend" v-for='item in recommends' @click="searchWord(item)">{{item}}</span>
      </div>


    </div>
   
  </div>
</template>

<script>
  import 'common/css/reset.css';
  import 'common/css/iconfont.css';
import 'common/css/swiper.min.css';
import 'common/css/swiper.min.js';
var _user=require("common/util/server/userServer.js");
var _cart=require("common/util/server/cart.js");
var _mm=require("common/util/mm.js");
  export default {
    name: 'app',
    watch:{
      '$route' (to, from) {
      // 对路由变化作出响应...
    if (to.path === "/") {
    
      this.showFloat=false;
    }

    }
 
    },
    data(){
    return {
      scrollY:0,
      showFloat:false,
      loginAnw:false,
      recommends:['11预热',"加湿器","iPhoneX","固态硬盘","官方网店"],
      cartCount:0,
      swcount:false
    }
    },
    created(){
      var _this=this;
        _user.checkLogin(function(res){
          console.log("alreadyLogin");
            _this.loginAnw= true;
        },function(err){
          return
        });
        _cart.getCartCount(function(res){
              _this.cartCount=res.data;
        },function(err){
          return
        })
        
        
        
    },
  
    computed:{
        checkCart(){
       if(!this.loginAnw){
        return "/login"
       }else{
        return "/cart"
       }

      },
      
      loginCheck(){
        if(this.loginAnw === false){
          return "登陆"
        }else{
          return "退出"
        }
      },
    },
   mounted(){
      window.addEventListener('scroll', 
      this.hasBG);
    if (!this.swcount) {
     this.swcount=true;

        var mySwiperMain = new Swiper ('.head-swiper-container', {
                  direction: 'horizontal',
                  loop: true,
                  pagination: '.swiper-pagination',
                  autoplay:3000,
                  
                })  ;
                 var mySwiperNews = new Swiper ('.newswiper-container', {
                  direction: 'vertical',
                  loop: true,
                
                  autoplay:3000,
                  
                })  ;
      
    }
        

         
             
    

    },
    methods:{
      colbanner(id){
        window.location.href="./list.html?categoryId="+id;
      },
      recommend(id){
        window.location.href="./list.html?categoryId="+id;
      },
      goCatelogBanner1(){
        window.location.href="./list.html?categoryId=100008";
      },
      goCatelogBanner2(){
        window.location.href="./list.html?categoryId=100012";
      },
      goSearchI(){
          window.location.href="./list.html?keyword=i";
      },
      goUser(){
        window.location.href="./user.html";
      },
      checkOut(e){
          var _this= this;
          if(this.loginAnw=== true){

            e.stopPropagation();
            _user.logout(function(res){
              _mm.goHome();
            },function(err){
              _mm.goHome();
            })
          }
      },
      loginCallBack(){
        this.loginAnw= true;
      },
      searchWord(item){
        if (item) {
          window.location.href='./list.html?keyword='+this.inputText;
        }
        

      },
      showFloatBox(){

        this.showFloat=!this.showFloat;
      },
      
      hasBG:function(){
// console.log(this.scrollY);
        this.scrollY=window.scrollY;

        if(this.scrollY>30){
          return true
        }else{
          return false
        }
       
      }

      
    },
    
  };

  
</script>

<style lang="stylus">
#app
  height:1000px
  width:100%
  .headerContent
    height:40px
    width:100%
    position:fixed
    left:0
    top:0
    display:flex
    z-index:2
    &.showgb
      background:linear-gradient(to bottom,rgba(222, 64, 43, 1),rgba(0, 0, 0, 0.1))
    a 
      flex:1
      .searchContent
       
        border-radius:15px
        margin:5px 5px
        background:white
        color:#666
        font-size:1rem
        .titleContent
          vertical-align:top
          width:30px
          display:inline-block;
          margin:0 5px
          .title
            font-size:1.5rem
            color:white
            font-weight:bolder
            line-height:30px
            color:rgb(222, 64, 43)
        i,p
          vertical-align:top
          display:inline-block
          margin:0 6px
          line-height:30px
    .loginContent
      flex:0 0 40px
      font-size:1rem
      color:white
      line-height:40px
  .footer
    height:50px
    width:100%
    background:white
    display:flex
    position:fixed
    bottom:0
    left:0
    color:#686868
    .navcon
      text-align:center
      flex:1 
      font-size:16px
      padding-top:10px
      &.active
        color:rgb(244, 64, 43)
      &.cart
        position:relative
        a
          color:#686868
        .cartfloat
          position:absolute
          left:50%
          top:5%
          background:rgb(244, 64, 43)
          border-radius:50%
          color:white;
          width:18px;
      .iconfont
        margin-top:10px
      span
        font-size:12px
  .floatContent
    position:fixed
    left:0
    top:0
    height:100%
    width:100%
    z-index:10
    background:white;
    .title
      color:#686868
      font-size:24px
      padding:20px 25px
    .recommendbox
      margin:10px 10px
      .recommend
        display:inline-block
        color:#686868
        padding:3px 10px
        margin:10px 15px
        background:#f0f2f5
        border-radius:10px
  .news
    background:#fff
    border-radius:10px
    box-shadow:3px 3px 5px #bfbfbf
    width:90%
    display:flex
    margin:0 auto
    line-height:30px
    padding:0 10px
    .title
      flex:0 0 100px
      span
        color:rgb(222, 64, 43)
        font-weight:700
    .newswiper-container
      flex:1
  .quickSale
    width:100%
    font-size:0
    margin-top:10px
    .title
      font-size:18px
      padding-left:10px
      line-height:24px
      border-bottom:.5px solid #bfbfbf
      i
        color:rgb(222, 64, 43)
    .saleContent
      display:inline-block
      text-align:center
      color:rgb(222, 64, 43)
      font-size:20px
      font-weight:800
      line-height:30px
      width:33vw
      img
        width:30vw
        height:auto
  .banner
    width:100%
    img
      width:100%
      height:auto
      display:block
  .litBanner
    width:100%
    font-size:0
    img
      width:50vw
      height:auto
  .colbanner
    width:100%
    font-size:0
    img
      display:inline-block
      width:25vw
      height:auto
  .recommendBox
    width:90%
    font-size:0
    margin:0 auto
    .title  
      font-size:20px
      line-height:30px
      width:100%
      color:white
      font-weight:700
      text-align:center
      border-radius:15px
      background-clip: text
      background-image: -webkit-linear-gradient(left, rgb(255, 151, 70), rgb(255, 84, 69))
    .recommend
      display:inline-block
      width:45vw
      font-size:16px
      line-height:40px
      font-size:15px
      text-align:center
      img
        width:44vw
        height:auto

      
  
      
        
.slideimg{
height:auto;
width:100%;
} 
.newswiper-container{
  height:30px
  width:70%
}
</style>
